<template>
  <div class="user-profile-container">
    <!-- 顶部语音助手区域 -->
    <div class="voice-assistant-card">
      <SpeechAssistant />
    </div>

    <!-- 基本信息卡片 -->
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h3>基本信息</h3>
          <el-button type="primary" link @click="editBasicInfo">编辑</el-button>
        </div>
      </template>
      <div class="profile-info">
        <div class="avatar-container">
          <el-avatar :size="100" :src="userInfo.avatar" />
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <el-button type="primary" link>更换头像</el-button>
          </el-upload>
        </div>
        <div class="info-list">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span>{{ userInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">身份证号：</span>
            <span>{{ userInfo.idNumber }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系电话：</span>
            <span>{{ userInfo.phone }}</span>
          </div>
          <div class="info-item">
            <span class="label">电子邮箱：</span>
            <span>{{ userInfo.email }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 社保信息概览卡片 -->
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h3>社保信息概览</h3>
        </div>
      </template>
      <div class="insurance-overview">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="overview-item">
              <div class="item-title">参保状态</div>
              <div class="item-value">
                <el-tag :type="userInfo.insuranceStatus === '正常' ? 'success' : 'warning'">
                  {{ userInfo.insuranceStatus }}
                </el-tag>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="overview-item">
              <div class="item-title">累计缴费月数</div>
              <div class="item-value">{{ userInfo.paymentMonths }}个月</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="overview-item">
              <div class="item-title">个人账户余额</div>
              <div class="item-value">¥{{ userInfo.balance }}</div>
            </div>
          </el-col>
        </el-row>

        <!-- 社保操作按钮区 -->
        <div class="insurance-actions">
          <el-button type="primary" @click="paymentDialogVisible = true" icon="el-icon-money">缴纳社保</el-button>
          <el-button type="success" @click="dialogVisible = true" icon="el-icon-refresh">社保转移</el-button>
          <el-button type="info" @click="openBlockchainBrowser()" icon="el-icon-search">链上查询</el-button>
        </div>
      </div>
    </el-card>

    <!-- 账户安全设置卡片 -->
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h3>账户安全</h3>
        </div>
      </template>
      <div class="security-settings">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="security-item">
              <div class="item-info">
                <span class="item-title">登录密码</span>
                <span class="item-desc">建议定期更换密码，确保账户安全</span>
              </div>
              <el-button type="primary" link @click="changePassword">修改</el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="security-item">
              <div class="item-info">
                <span class="item-title">手机绑定</span>
                <span class="item-desc">已绑定：{{ userInfo.phone }}</span>
              </div>
              <el-button type="primary" link @click="changePhone">更换</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 缴纳社保对话框 -->
    <el-dialog
      v-model="paymentDialogVisible"
      title="缴纳社保"
      width="500px"
    >
      <el-form :model="paymentForm" label-width="100px">
        <el-form-item label="缴纳金额">
          <el-input v-model="paymentForm.amount" type="number" placeholder="请输入缴纳金额"></el-input>
        </el-form-item>
        <el-form-item label="缴纳类型">
          <el-radio-group v-model="paymentForm.paymentType">
            <el-radio label="个人缴纳">个人缴纳</el-radio>
            <el-radio label="单位缴纳">单位缴纳</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paymentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPayment">确认缴纳</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 社保转移对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="社保转移申请"
      width="600px"
    >
      <el-form :model="transferForm" label-width="140px">
        <el-form-item label="当前社保局地址">
          <el-input v-model="transferForm.currentBureauAddress" placeholder="请输入当前社保局地址"></el-input>
        </el-form-item>
        <el-form-item label="当前所在省份">
          <el-select v-model="transferForm.fromCity" placeholder="请选择当前所在省份" style="width: 100%">
            <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转入社保局地址">
          <el-input v-model="transferForm.toBureauAddress" placeholder="请输入转入社保局地址"></el-input>
        </el-form-item>
        <el-form-item label="转入省份">
          <el-select v-model="transferForm.toCity" placeholder="请选择转入省份" style="width: 100%">
            <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitTransfer">提交申请</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import SpeechAssistant from '../../components/SpeechAssistant.vue'
import { getCurrentUserMaskedInfo } from '@/apis/api';
import axios from "@/plugins/myAxios";

// 路由实例
const router = useRouter()
onMounted(async() => {
  console.log(1111)
  const currentUser = await getCurrentUserMaskedInfo();
  console.log(currentUser);
})

// 用户信息
const userInfo = reactive({
  avatar: 'https://example.com/avatar.jpg',
  name: '张三',
  idNumber: '310************123',
  phone: '138****5678',
  email: 'zhang***@example.com',
  insuranceStatus: '正常',
  paymentMonths: 36,
  balance: '25,680.00'
})

// 缴纳社保对话框
const paymentDialogVisible = ref(false)
const paymentForm = reactive({
  amount: '',
  paymentType: '个人缴纳'
})

// 社保转移对话框
const transferDialogVisible = ref(false)
const transferForm = reactive({
  currentBureauAddress: '',
  fromCity: '',
  toBureauAddress: '',
  toCity: ''
})

// 省份列表（示例数据）
const provinces = [
  { code: '11', name: '北京市' },
  { code: '31', name: '上海市' },
  { code: '44', name: '广东省' },
  { code: '33', name: '浙江省' },
  { code: '32', name: '江苏省' }
]

// 头像上传成功处理
const handleAvatarSuccess = (response: any) => {
  if (response.code === 0) {
    userInfo.avatar = response.data.url
    ElMessage.success('头像更新成功')
  } else {
    ElMessage.error('头像更新失败')
  }
}

// 编辑基本信息
const editBasicInfo =  () => {
  // TODO: 实现编辑基本信息的逻辑
  ElMessage.info('编辑基本信息功能开发中11')
}

// 修改密码
const changePassword = () => {
  // TODO: 实现修改密码的逻辑
  ElMessage.info('修改密码功能开发中')
}

// 更换手机号
const changePhone = () => {
  // TODO: 实现更换手机号的逻辑
  ElMessage.info('更换手机号功能开发中')
}

// 缴纳社保
const dialogVisible4Info = () => {
  paymentDialogVisible.value = true
}

// 提交缴纳社保
const submitPayment = () => {
  if (!paymentForm.amount) {
    ElMessage.warning('请输入缴纳金额')
    return
  }

  // TODO: 实际的社保缴纳API调用
  setTimeout(() => {
    ElMessage.success('社保缴纳成功')
    paymentDialogVisible.value = false
    // 重置表单
    paymentForm.amount = ''
  }, 1000)
}

// 社保转移
const dialogVisible = ref(false)

// 提交社保转移
const submitTransfer = () => {
  if (!transferForm.currentBureauAddress || !transferForm.fromCity ||
      !transferForm.toBureauAddress || !transferForm.toCity) {
    ElMessage.warning('请填写完整的转移信息')
    return
  }

  // TODO: 实际的社保转移API调用
  setTimeout(() => {
    ElMessage.success('社保转移申请提交成功')
    transferDialogVisible.value = false
    // 重置表单
    Object.keys(transferForm).forEach(key => {
      transferForm[key] = ''
    })
  }, 1000)
}

// 打开区块链浏览器
const openBlockchainBrowser = () => {
  router.push('/user/blockchain-browser')
}
</script>

<style scoped>
.user-profile-container {
  padding: 20px;
}

.profile-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-info {
  display: flex;
  gap: 40px;
}

.avatar-container {
  text-align: center;
}

.avatar-uploader {
  margin-top: 10px;
}

.info-list {
  flex: 1;
}

.info-item {
  margin-bottom: 15px;
  font-size: 14px;
}

.info-item .label {
  color: #606266;
  margin-right: 10px;
}

.insurance-overview {
  padding: 20px 0;
}

.overview-item {
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.item-title {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}

.item-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 20px;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.item-desc {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

/* 语音助手样式 */
.voice-assistant-card {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.voice-button {
  margin-right: 15px;
}

.voice-status {
  color: #606266;
  font-size: 14px;
}

/* 社保操作按钮区样式 */
.insurance-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 语音反馈层样式 */
.feedback-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.feedback-box {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  text-align: center;
}

.feedback-buttons {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.candidate-commands {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  text-align: center;
}

@media (max-width: 768px) {
  .profile-info {
    flex-direction: column;
    align-items: center;
  }

  .info-list {
    width: 100%;
  }

  .overview-item {
    margin-bottom: 20px;
  }
}
</style>
